<script setup>
  import { ref } from 'vue'
  import { myCouponApi } from "@/api";
  const emit = defineEmits(['selected'])
  const visible = ref(false)
  const couponList = ref([])
  const orderPayment = ref()
  const selectCoupon = (coupon) => {
    emit('selected', coupon)
  }
  const getCouponList = () => {
    myCouponApi().then((res) => {
      couponList.value = res.data
      couponList.value.forEach((item, index) => {
        console.log(item)
        if (Number(item.full_price) > Number(orderPayment.value)) couponList.value.splice(index, 1)
      })
    })
  }
  const open = (payment) => {
    visible.value = true
    orderPayment.value = payment
    getCouponList()
  }
  const close = () => {
    visible.value = false
  }
  defineExpose({
    open,
    close
  })
</script>

<template>
  <a-modal v-model:open="visible" title="选择优惠券" :footer="null">
    <div class="coupon-list">
      <div class="coupon" v-for="(coupon, index) in couponList" :key="index">
        <div class="coupon-info">
          <div class="c-price" v-if="coupon.type === 'discount'">
            <div class="price"> {{ coupon.discount }} </div>
            <div class="dw"> 折 </div>
          </div>
          <div class="c-price" v-else>
            <div class="dw"> ￥ </div>
            <div class="price"> {{ coupon.reduce_price }} </div>
          </div>
          <div class="c-name"> {{ coupon.name }} </div>
          <div class="tj"> 满 {{ coupon.full_price }} 可用 </div>
          <div class="c-time"> {{ coupon.start_time }} <i class="fa-solid fa-minus"></i> {{ coupon.end_time }} </div>
        </div>
        <div class="c-btn">
          <div class="btn" @click="selectCoupon(coupon)">  使 用 </div>
        </div>
      </div>
    </div>
  </a-modal>
</template>

<style scoped lang="scss">
  .coupon-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    .coupon {
      width: 137px;
      display: inline-flex;
      flex-direction: column;
      background: linear-gradient(var(--primary), #f22);
      border-radius: 10px;
      .coupon-info {
        flex: 1;
        gap: 5px;
        display: flex;
        align-items: center;
        flex-direction: column;
        margin: 10px 10px 0;
        background-color: #fff;
        border-radius: 10px;
        .c-price {
          color: #D80303;
          font-size: 35px;
          font-weight: bold;
          display: flex;
          align-items: end;
          margin-top: 10px;
          .dw {
            font-size: 14px;
          }
          .price {
            line-height: 35px;
          }
        }
        .c-name {
          font-size: 16px;
          font-weight: bold;
        }
        .c-time {
          color: #999;
          font-size: 10px;
          margin-bottom: 5px;
        }
      }
      .c-btn {
        padding: 10px 12px;
        .btn {
          color: #fff;
          padding: 3px 0;
          font-weight: bold;
          text-align: center;
          border-radius: 20px;
          background-color: #f22;
          border: 3px solid sandybrown;
          transition: all .3s ease-in-out;
          &:hover {
            cursor: pointer;
            background-color: #f40;
          }
        }
      }
    }
  }
  :deep(.ant-modal-content) {
    padding: 10px;
  }
</style>